import { createApp, reactive } from 'vue';
import { ElLoading } from 'element-plus';
import myLoad from './CommonLoading.vue';

const msg = reactive({
  show: false,
  title: '拼命加载中...',
});

const $loading = createApp(myLoad, { msg }).mount(document.createElement('div'));
const load = {
  show(title) {
    // 控制显示loading的方法
    msg.show = true;
    msg.title = title;
    document.body.appendChild($loading.$el);
  },

  hide() {
    // 控制loading隐藏的方法
    msg.show = false;
  },
};
let loading;
let loadingNum = 0;

function startLoading(title) {
  if (loadingNum == 0) {
    loading = ElLoading.service({
      lock: true,
      text: title,
      background: 'rgba(255,255,255,0.5)',
    });
  }

  //请求数量加1
  loadingNum++;
}

function endLoading() {
  //请求数量减1
  loadingNum--;

  if (loadingNum <= 0) {
    loading.close();
  }
}

export { load, startLoading, endLoading };
